<!--检测点列表-->
<template>
	<view>
		<!-- <Listscroll requestUrl="/app/app-mine/device-warning" :params="params" requestType="post">
			<template #default="scope"> @click="openDetectionPhoto(item,i)" -->
		<view class="notice-item" v-for="(item,i) in  detectionPointList" :key="i">
			<view class="notice-item__title" @click="openDetectionPhoto(item)">
				<view class="title">{{item.labelNumber}}</view>
			</view>
			<view class="operation-button">
				<view class="edit-button" @click="editMarkPointer(item)"></view>
				<view class="delete-button" @click="deleteMarkPointer(item,i)"></view>
			</view>
			<view class="notice-item__containter" v-if="item.pointList">{{item.pointList.length}}个标记点</view>
			<view v-else>0个标记点</view>
		</view>
		<!-- </template>
		</Listscroll> -->
		<view class="operation-button">
			<view class="add-button" @click="addNewDetectionPoint"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import Listscroll from "@/components/list-scroll/list-scroll.vue"
	import {
		onLoad,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app";
	import {
		batchInsertPoint
	} from '@/api/deviceTest.js';
	const params = ref({})
	const detectionPointList = ref([])
	const dataIndex = ref(0)
	const taskKey = ref('')
	const taskId = ref('')
	// onLoad 接受 跳转过来 页面传递的参数id
	onLoad((option) => {
		//console.log("oooooo",option.id);
		let keyValue = option.id;
		taskId.value = option.id;
		taskKey.value = "task" + keyValue;
		detectionPointList.value = uni.getStorageSync(taskKey.value) || [];
	});
	const editMarkPointer = (item) => {
		//console.log("编辑标记点");
		let info = item;
		uni.navigateTo({
			url: '/pages/putOnRecord/editDetectionPoint?info=' + encodeURIComponent(JSON.stringify(info))
		});
	}
	const deleteMarkPointer = (data, index) => {
		// console.log("删除标记点");
		uni.showModal({
			title: '有确认取消的弹窗',
			content: '确认要删除该项吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('点击了确认');
					//console.log("detectionPointList11",detectionPointList.value);
					detectionPointList.value.splice(index, 1);
					uni.setStorageSync('task' + taskId.value, detectionPointList.value);
					//console.log("detectionPointList22",detectionPointList.value);
				} else {
					console.log('点击了取消')
				}
			}
		})
	}
	const addNewDetectionPoint = () => {
		//console.log("新增检测点");
		// let info = {
		// 				index: dataIndex.value,
		// 				taskKey: taskKey.value,
		// 			}
		uni.navigateTo({
			url: '/pages/putOnRecord/addNewDetectionPoint?id=' + taskId.value
		})
	}
	const openDetectionPhoto = (data) => {
		console.log("iiiii", data);
		//console.log("xxxxxx",index);
		uni.navigateTo({
			url: '/pages/putOnRecord/editDetectionPoint?id=' + taskId.value + '&dataInfo=' +
				encodeURIComponent(JSON.stringify(data))
		})
	}
	onNavigationBarButtonTap(function(e) {
		let factoryId = uni.getStorageSync('factoryId');
		let tempList = JSON.parse(JSON.stringify(uni.getStorageSync('task' + factoryId)));
		//console.log("grgrgr",tempList);
		let params = {
			factoryId: factoryId,
			groupList: JSON.stringify(tempList)
		};
		//params = JSON.stringify(params);
		//console.log("params",params);
		batchInsertPoint(params).then(res => {
			console.log("ressss", res);
			//上传成功之后，将storage中的task清空
			if (res.code == 200) {
				uni.clearStorageSync('task' + factoryId);
			}
		})
	})
</script>

<style lang="scss" scoped>
	.notice-item {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 10rpx;
		margin: 20rpx 30rpx 0 30rpx;
		padding: 20rpx;
		position: relative;
	}

	.notice-item__title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #455BDF;
			cursor: pointer;
		}

		.type {
			display: inline-block;
			padding: 4rpx 8rpx;
			background: #fef0f0;
			border: 2rpx solid #fde2e2;
			color: rgb(251, 69, 59);
			border-radius: 10rpx;
			font-size: 20rpx;

			&.green {
				background: #f0f9eb;
				border-color: #e1f3d8;
				color: #67c23a;
			}
		}
	}

	.notice-item__containter {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font-size: 28rpx;
	}

	.operation-button {
		position: absolute;
		right: 40rpx;
		display: flex;
		flex-direction: row;
		margin-top: 50rpx;

		.edit-button {
			//width:40rpx;
			// height:30rpx;
			// display: inline-block;
			// padding: 4rpx 8rpx;
			// background: #00aaff;
			// border:2rpx solid #00aaff;
			// color: #ffffff;
			// border-radius: 10rpx;
			// font-size: 20rpx;
			width: 32rpx;
			height: 32rpx;
			background-image: url('@/static/deviceImg/edit-button.png');
			background-size: 100% 100%;
			cursor: pointer;
		}

		.delete-button {
			//width:40rpx;
			// height:30rpx;
			// margin-left: 10rpx;
			// display: inline-block;
			// padding: 4rpx 8rpx;
			// background: #fef0f0;
			// border:2rpx solid #fde2e2;
			// color: rgb(251, 69, 59);
			// border-radius: 10rpx;
			// font-size: 20rpx;
			width: 32rpx;
			height: 32rpx;
			background-image: url('@/static/deviceImg/delete-button.png');
			background-size: 100% 100%;
			margin-left: 10rpx;
			cursor: pointer;
		}

		.add-button {
			width: 48rpx;
			height: 48rpx;
			background-image: url('@/static/deviceImg/add-button.png');
			background-size: 100% 100%;
			margin-left: 10rpx;
			cursor: pointer;
		}
	}
</style>